<template>
  <div>
    <cs-drawer :isShowFoldBtn="false" :drawerFold="true" :dataSource="dataSource">
      <div v-loading="isLoading">
        <div class="previewBox" :class="mediaUrl.length === 0 ? 'previewBox_noData' : ''">
          <canvas id="videoCanvas" style="display: none"></canvas>
          <!-- <span>{{ mediaData.pictureUrl }}</span> -->
          <img src="~@/assets/img/tp.png" v-if="mediaUrl.length === 0" />
          <!-- <img
            :src="mediaData.pictureUrl"
            v-else-if="mediaData.type === 1 && mediaUrl.length !== 0"
          /> -->

          <el-image
            style="width: 100%; height: 100%"
            :src="mediaData.pictureUrl"
            :preview-src-list="previewImgList"
            v-else-if="mediaData.type === 1 && mediaUrl.length !== 0"
          >
          </el-image>

          <video
            width="303"
            height="175"
            controls
            crossorigin="anonymous"
            :src="mediaData.pictureUrl"
            v-else-if="mediaData.type === 2 && mediaUrl.length !== 0"
          ></video>
        </div>
        <div id="previewItemBox" v-if="mediaUrl.length !== 0">
          <template v-for="item in urlData">
            <div class="previewItem" v-if="item.typeCode === null" :key="item.bindKey">
              <div
                class="previewOption"
                @click="
                  handlePreviewOptionClick({
                    type: item.type,
                    pictureUrl: item.pictureUrl,
                    typeCode: item.typeCode
                  })
                "
              >
                <div class="triangle_playIcon"></div>
                <img
                  :src="videoPreviewImgBox_url"
                  ref="videoPreviewImgBox"
                  :class="mediaData.typeCode === null ? 'previewItemActive' : ''"
                />
                <span class="previewDescribe previewDescribe_video">车牌</span>
              </div>
            </div>
            <div class="previewItem" v-else-if="item.typeCode === '5'" :key="item.bindKey2">
              <div
                class="previewOption"
                @click="
                  handlePreviewOptionClick({
                    type: item.type,
                    pictureUrl: item.pictureUrl,
                    typeCode: item.typeCode
                  })
                "
              >
                <div class="triangle_playIcon"></div>
                <img
                  :src="videoPreviewImgBox_wheelAxle_url"
                  ref="videoPreviewImgBox_wheelAxle"
                  :class="mediaData.typeCode === '5' ? 'previewItemActive' : ''"
                />
                <span class="previewDescribe previewDescribe_video">轮轴</span>
              </div>
            </div>
            <div class="previewItem" v-else :key="item.typeCode">
              <div
                class="previewOption"
                @click="
                  handlePreviewOptionClick({
                    type: item.type,
                    pictureUrl: item.pictureUrl,
                    typeCode: item.typeCode
                  })
                "
              >
                <img
                  :src="item.pictureUrl"
                  :class="mediaData.typeCode === item.typeCode ? 'previewItemActive' : ''"
                />
                <span class="previewDescribe previewDescribe_img">
                  {{ item.typeCode === '0' ? '车牌' : '过车' }}
                </span>
              </div>
            </div>
          </template>

          <cs-btn btnText="下载" class="downLoadBtb" @click.native="handleDownLoadBtnClick" />
        </div>
        <cs-tip-label :type="overweightTypeText">{{ overweightText }}</cs-tip-label>
        <!-- 超限信息 -->
        <div id="overrunInfo">
          <div class="overrunText tooltip" v-for="(item, index) in overRunData" :key="index">
            <span class="requiredStart" v-show="item.isRequire">*</span>
            <span class="overrunTitle">{{ item.title }} </span>
            <span class="infoText_span" v-show="!item.showInput">{{ item.text }}</span>
            <template v-if="item.isEdit">
              <el-input
                v-show="item.showInput"
                v-model.trim="item.text"
                class="editInput"
                :class="item.inputStatus ? 'el_input_active' : ''"
                @blur="inputBlurEvent(item.id, overRunData)"
                @keyup.enter.native="enterKeyEvent(item.id, overRunData)"
                :ref="item.ref"
              ></el-input>
              <span
                class="tooltiptext_overrunInfo"
                :style="item.inputStatus === true ? 'display: inline-block' : 'display: none'"
                >{{ item.errorText }}</span
              >
              <i
                class="el-icon-edit"
                v-show="item.isShowEditIcon"
                @click="showEditInput(item.id, overRunData)"
              ></i>
            </template>
          </div>
        </div>
        <!-- 图表 -->
        <div class="chartsBox" :class="getChartsClass">
          <cs-percent-pie-charts pid="drawerP" percentNum="20.56" />
        </div>
        <!-- 分割线 -->
        <div id="divider"></div>
        <div id="baseInfo">
          <div class="baseInfo_header">
            <span>基础信息</span>
          </div>
          <!-- 已审核图片 -->
          <img src="~@/assets/img/ysh.png" class="ReviewedImg" v-show="!isEdit" />
          <div class="baseInfo_body">
            <div
              class="overrunText baseInfoText tooltip"
              v-for="(item, index) in baseInfo_body_data"
              :key="index"
            >
              <span class="requiredStart" v-show="item.isRequire">*</span>
              <span
                class="overrunTitle"
                :class="item.isShowEditIcon || isEdit ? '' : 'reviewComments'"
                >{{ item.title }}</span
              >
              <span class="infoText_span" v-show="!item.showInput">{{ item.text }}</span>
              <template v-if="item.isSelect">
                <el-select
                  v-model="item.text"
                  :class="item.inputStatus ? 'el_input_active' : ''"
                  placeholder="请选择"
                  v-show="item.showInput"
                  @blur="selectChangeEvent(item.id, baseInfo_body_data, 'blur')"
                  @change="selectChangeEvent(item.id, baseInfo_body_data, 'change')"
                >
                  <el-option
                    v-for="item2 in item.options"
                    :key="item2.value"
                    :label="item2.label"
                    :value="item2.value"
                  >
                  </el-option>
                </el-select>
                <span
                  class="tooltiptext_baseInfo"
                  :style="item.inputStatus === true ? 'display: inline-block' : 'display: none'"
                  >{{ item.errorText }}</span
                >
                <i
                  class="el-icon-edit"
                  v-show="item.isShowEditIcon"
                  @click="showEditInput(item.id, baseInfo_body_data)"
                ></i>
              </template>
              <template v-else-if="item.isTextarea">
                <el-input
                  type="textarea"
                  :rows="2"
                  v-model.trim="item.text"
                  v-show="item.showInput"
                  class="el-textarea tooltip"
                  :class="item.inputStatus ? 'el_textarea_active' : ''"
                  resize="none"
                  @blur="inputBlurEvent(item.id, baseInfo_body_data)"
                  @keyup.enter.native="enterKeyEvent(item.id, baseInfo_body_data)"
                >
                </el-input>
                <span
                  class="tooltiptext_baseInfo"
                  :style="item.inputStatus === true ? 'display: inline-block' : 'display: none'"
                  >{{ item.errorText }}</span
                >
                <i
                  class="el-icon-edit"
                  v-show="item.isShowEditIcon"
                  @click="showEditInput(item.id, baseInfo_body_data)"
                ></i>
              </template>
              <template v-else-if="item.isEdit">
                <el-input
                  v-show="item.showInput"
                  v-model.trim="item.text"
                  class="editInput tooltip"
                  :class="item.inputStatus ? 'el_input_active' : ''"
                  @blur="inputBlurEvent(item.id, baseInfo_body_data)"
                  @keyup.enter.native="enterKeyEvent(item.id, baseInfo_body_data)"
                  :ref="item.ref"
                ></el-input>
                <span
                  class="tooltiptext_baseInfo"
                  :style="item.inputStatus === true ? 'display: inline-block' : 'display: none'"
                  >{{ item.errorText }}</span
                >
                <i
                  class="el-icon-edit"
                  v-show="item.isShowEditIcon"
                  @click="showEditInput(item.id, baseInfo_body_data)"
                ></i>
              </template>
              <!-- <div class="inputErrorText" v-show="item.inputStatus">{{ item.errorText }}</div> -->
            </div>

            <!-- <div class="overrunText baseInfoText reviewCommentsBox">
            <span class="requiredStart">*</span>
            <span class="overrunTitle reviewComments" :class="{ reviewComments_normal: !isEdit }"
              >审核意见</span
            >
            <span class="infoText_span" v-show="!isEdit">{{ opinion }}</span>
            <el-input
              type="textarea"
              :rows="2"
              v-model.trim="opinion"
              v-show="isEdit"
              class="el-textarea tooltip"
              :class="reviewCommentsStatus ? 'el_textarea_active' : ''"
              resize="none"
              @blur="reviewCommentsInputBlur"
            >
            </el-input>
          </div> -->
            <div class="overrunText baseInfoText" v-show="!isEdit">
              <span class="overrunTitle reviewComments">审核人员</span>
              <span class="infoText_span">{{ Reviewer }}</span>
            </div>
            <div class="overrunText baseInfoText" v-show="!isEdit">
              <span class="overrunTitle reviewComments">审核时间</span>
              <span class="infoText_span">{{ examineTime }}</span>
            </div>

            <cs-btn btnText="提交" type="primary" @click.native="submitBtnClick" v-show="isEdit" />
          </div>
        </div>
      </div>
    </cs-drawer>
  </div>
</template>

<script>
import _ from 'lodash'

import csDrawer from '@/components/cs-drawer/cs-drawer.vue'
import csTipLabel from '@/components/cs-tipLabel/cs-tipLabel.vue'
import csBtn from '@/components/cs-btn/cs-btn.vue'
import csPercentPieCharts from '@/components/cs-percentPieCharts/cs-searchDetailPieCharts.vue'
import {
  getDataSearchDetailById,
  dataSearchExamine
} from '@/service/monitor/data_search/data_search'
import { getAllSiteName } from '@/service/operate/site_manage/site_manage'
// import { searchCarNum } from '@/service/operate/cart_manage/cart_manage'
import { isCarNumCorrect, isNumber } from '@/utils/regularVerification'
// import { tToKg } from '@/utils/dataConversion'

export default {
  components: {
    csDrawer,
    csTipLabel,
    csBtn,
    csPercentPieCharts
  },
  data() {
    return {
      isLoading: true,
      isEdit: true,
      // 图片视频url
      mediaUrl: [],
      urlData: {},
      // 视频url
      // videoUrl: '',
      // // 车牌图片url
      // carNumImg: '',
      // // 过车图片url
      // passingCarImg: '',
      mediaData: {},
      previewImgList: [],
      videoPreviewImgBox_url: '',
      videoPreviewImgBox_wheelAxle_url: '',
      // base64格式视频预览图
      // videoImgurl: '',
      overweightTypeText: '',
      overweightText: '',
      status1T: 0,
      status2T: 0,
      isAudit: '',
      id: '',
      carId: '',
      // 原始和处理过的总重(T)
      originTotalWeight: '',
      handleTotalWeight: '',
      siteOptions: [],
      colorOption: [],
      overRunData: [
        {
          id: 10,
          title: '总质量',
          text: '48.224t',
          isEdit: true,
          isShowEditIcon: true,
          showInput: false,
          inputStatus: false,
          errorText: '',
          ref: 'totalWeight',
          isNunber: true
        },
        {
          id: 11,
          title: '总质量限值',
          text: '40t',
          isEdit: false,
          ref: 'stdWeight'
        },
        {
          id: 12,
          title: '超限重',
          text: '8.224t',
          isEdit: false,
          ref: 'overWeight'
        },
        {
          id: 13,
          title: '总轴数',
          text: '2',
          isEdit: true,
          isShowEditIcon: true,
          showInput: false,
          inputStatus: false,
          errorText: '',
          ref: 'axleNum',
          isNunber: true
        }
      ],
      baseInfo_body_data: [
        {
          id: 1,
          title: '检测站点',
          text: '周铁S230',
          isEdit: true,
          isShowEditIcon: true,
          showInput: false,
          inputStatus: false,
          errorText: '',
          isSelect: true,
          options: [],
          ref: 'siteName'
        },
        {
          id: 2,
          title: '车 牌 号',
          text: '鲁Q200CE',
          originText: '鲁Q200CE',
          isEdit: true,
          isShowEditIcon: true,
          showInput: false,
          inputStatus: false,
          errorText: '',
          ref: 'carNum',
          isRequire: true
        },
        {
          id: 3,
          title: '车牌颜色',
          text: '黄色',
          isEdit: true,
          isShowEditIcon: true,
          showInput: false,
          inputStatus: false,
          errorText: '',
          // isSelect: true,
          // options: [
          //   {
          //     value: '黄色',
          //     label: '黄色'
          //   },
          //   {
          //     value: '蓝色',
          //     label: '蓝色'
          //   },
          //   {
          //     value: '绿色',
          //     label: '绿色'
          //   }
          // ],
          ref: 'color'
        },
        {
          id: 4,
          title: '企业名称',
          text: '载货汽车',
          isEdit: false,
          ref: 'companyName'
        },
        {
          id: 5,
          title: '检测时间',
          text: '2021-09-31 15:11:52',
          isEdit: false,
          ref: 'createTime'
        },
        // {
        //   id: 6,
        //   title: '检测数据来源',
        //   text: '快速动态检测数据',
        //   isEdit: false
        // },
        {
          id: 7,
          title: '检测单号',
          text: '32025415315315321531252314324',
          isEdit: false,
          ref: 'id'
        },
        {
          id: 14,
          title: '审核意见',
          text: '',
          isEdit: true,
          isShowEditIcon: true,
          showInput: false,
          inputStatus: false,
          errorText: '',
          isTextarea: true,
          ref: 'opinion'
        }
      ],
      // 审核意见
      opinion: '',
      // 审核人员
      Reviewer: '',
      // 审核时间
      examineTime: '',
      reviewCommentsStatus: false,
      dataSource: ''
    }
  },
  created() {
    this.$bus.$on('dataSearchDrawerId', (id) => {
      this.mediaData = {}

      this.dataSource = 'dataSearch'
      this.getDataSearchDetailById(id)
      // this.isLoading = true
    })
    this.getAllSiteName()
    this.$bus.$on('drawerBoxStatusChange_dataSearch', (id) => {
      this.overRunData.forEach((item) => {
        item.inputStatus = false
        item.showInput = false
      })
      this.baseInfo_body_data.forEach((item) => {
        item.inputStatus = false
        item.showInput = false
      })
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.$bus.$on('dataSearchDrawerDataUpdate_updateStatus', () => {
        this.getDataSearchDetailById(this.id)
      })
    })
  },
  beforeDestroy() {
    this.$bus.$off('dataSearchDrawerDataUpdate')
    this.$bus.$off('updateCsPercentCharts')
    this.$bus.$off('dataSearchDrawerDataUpdate_updateStatus')
  },
  computed: {
    getChartsClass() {
      if (this.mediaUrl.length === 0) {
        return 'chartsBox_noMediaData'
      } else if (this.urlData.length > 5) {
        console.log(this.urlData)
        return 'chartsBox_moreData'
      } else {
        return ''
      }
    }
  },
  methods: {
    async getAllSiteName() {
      const { data } = await getAllSiteName()
      console.log(data)
      if (data.code === 0) {
        const newData = [...new Set(data.data)]
        newData.forEach((item) => {
          this.baseInfo_body_data[0].options.push({
            value: item,
            label: item
          })
        })
      }
    },
    handleDownLoadBtnClick() {
      this.$bus.$emit('sourceDownLoadEvent', this.urlData)
    },
    async submitBtnClick() {
      this.isLoading = true
      // const status = this.reviewCommentsInputBlur()
      // 如果输入了审核意见
      // if (status) {
      //   this.overRunData.forEach((item) => {
      //     item.isShowEditIcon = !item.isShowEditIcon
      //   })
      //   this.baseInfo_body_data.forEach((item) => {
      //     item.isShowEditIcon = !item.isShowEditIcon
      //   })
      //   this.isEdit = false
      // }
      // if (!this.submitStatus) {
      //   this.submitStatus = true
      //   this.overRunData.forEach((item) => {
      //     item.isShowEditIcon = true
      //   })
      //   this.baseInfo_body_data.forEach((item) => {
      //     item.isShowEditIcon = true
      //   })
      //   return false
      // }

      this.status1T = 0
      this.status2T = 0

      this.overRunData.forEach((item) => {
        item.isShowEditIcon = true
        if (item.isRequire) {
          if (item.text === null || item.text === undefined || item.text === '') {
            item.showInput = true
            item.errorText = `${item.title.replace(/\s*/g, '')}不能为空`
            item.inputStatus = true
            this.isLoading = false
            console.log(item.text)
          } else {
            this.status1T++
          }
        } else {
          if (item.isNunber) {
            if (item.text) {
              if (!isNumber(item.text)) {
                item.showInput = true
                item.errorText = '请输入0-9位的数字'
                item.inputStatus = true
                this.isLoading = false
              } else {
                this.status1T++
              }
            } else {
              this.status1T++
            }
          } else {
            this.status1T++
          }
        }
      })

      this.baseInfo_body_data.forEach(async (item) => {
        item.isShowEditIcon = true
        if (item.isRequire) {
          if (!item.text || item.text === '') {
            item.showInput = true
            item.errorText = `${item.title.replace(/\s*/g, '')}不能为空`
            item.inputStatus = true
            this.isLoading = false
          }
        }
        if (item.id === 2) {
          if (item.text) {
            if (!isCarNumCorrect(item.text)) {
              item.showInput = true
              item.errorText = '请输入正确格式的车牌号'
              item.inputStatus = true
              this.isLoading = false
            } else {
              console.log('aaa')
              if (item.text !== item.originText) {
                // const data = await this.isCarNumRepeat(item.text)
                // if (data.code === 1) {
                //   item.showInput = true
                //   item.errorText = data.msg
                //   item.inputStatus = true
                //   this.isLoading = false
                //   return false
                // } else if (data === false) {
                //   console.log('bba')
                //   this.isLoading = false
                //   return false
                // } else {
                console.log('bbb')
                this.status2T++
                // this.submit()
                // }
              } else {
                this.status2T++
              }
            }
          } else {
            item.showInput = true
            item.errorText = '车牌号不能为空'
            item.inputStatus = true
            this.carNumberStatus = false
            this.isLoading = false
          }
        } else {
          console.log('bbv')
          this.status2T++
        }
      })

      console.log(this.status1T)
      console.log(this.status2T)
      if (
        this.status1T === this.overRunData.length &&
        this.status2T === this.baseInfo_body_data.length
      ) {
        this.$confirm('此操作将会修改车辆信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.submit()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消修改'
            })
            this.isLoading = false
          })
      }
    },
    // 调用提交审核接口
    async submit() {
      // if (
      //   this.status1T === this.overRunData.length &&
      //   this.status2T === this.baseInfo_body_data.length
      // ) {
      console.log('bbb')
      this.isEdit = false
      const { data } = await dataSearchExamine({
        id: this.id,
        carId: this.carId,
        flag: 0,
        carNum: _.toUpper(this.baseInfo_body_data[1].text),
        axleNum: this.overRunData[3].text,
        // 如果总重没变，则把原始总重数据转换为kg，否则就把新输入的单位转换为kg
        // totalWeight:
        //   this.overRunData[0].text.split('t')[0] === this.handleTotalWeight
        //     ? tToKg(this.originTotalWeight)
        //     : tToKg(this.overRunData[0].text.split('t')[0]),
        totalWeight: this.overRunData[0].text,
        siteName: this.baseInfo_body_data[0].text,
        color: this.baseInfo_body_data[2].text,
        opinion: this.baseInfo_body_data[6].text
      })
      console.log(data)

      if (data.code === 0) {
        this.$bus.$emit('dataSearchDrawerDataUpdate')
        this.isEdit = false
        this.$message({
          message: '审核成功',
          type: 'success'
        })
        this.overRunData.forEach((item) => {
          item.isShowEditIcon = false
          item.showInput = false
        })
        this.baseInfo_body_data.forEach((item) => {
          item.isShowEditIcon = false
          item.showInput = false
        })
        this.examineBtnStatus = false
        this.getDataSearchDetailById(this.id)
        this.isLoading = false
      }
      // }
    },
    // 预览项被点击
    handlePreviewOptionClick(data) {
      this.mediaData = data
    },
    // 显示输入框图标
    showEditInput(id, data) {
      for (const item of data) {
        if (item.id === id) {
          item.showInput = true
          item.isShowEditIcon = false
        }
      }
    },
    // 输入框失去焦点事件
    inputBlurEvent(id, data) {
      data.forEach(async (item) => {
        if (id === item.id) {
          if (item.isRequire) {
            if (!item.text || item.text.trim() === '') {
              item.errorText = `${item.title.replace(/\s*/g, '')}不能为空`
              item.inputStatus = true
              console.log(item.errorText)
            }
          }
          // 判断是否是数字
          if (item.isNunber) {
            if (item.text) {
              if (!isNumber(item.text)) {
                item.errorText = '请输入0-9的数字'
                item.inputStatus = true
                return
              }
            }
          }
          // 判断车牌号是否重复
          if (item.id === 2) {
            if (item.text) {
              if (!isCarNumCorrect(item.text)) {
                item.errorText = '请输入正确的车牌号'
                item.inputStatus = true
                return
              }
            }
            // if (item.text !== item.originText) {
            //   const data = await this.isCarNumRepeat(item.text)
            //   if (data.code === 1) {
            //     item.errorText = data.msg
            //     item.inputStatus = true
            //     return
            //   } else if (data === false) {
            //     return
            //   }
            // }
          }
          item.inputStatus = false
          item.showInput = false
          item.isShowEditIcon = true
          console.log(item.text)
        }
      })
    },
    // 按回车键事件
    enterKeyEvent(id, data) {
      data.forEach(async (item) => {
        if (id === item.id) {
          if (item.isRequire) {
            if (!item.text || item.text.trim() === '') {
              item.errorText = `${item.title.replace(/\s*/g, '')}不能为空`
              item.inputStatus = true
            }
          }
          // 判断是否是数字
          if (item.isNunber) {
            if (item.text) {
              if (!isNumber(item.text)) {
                item.errorText = '请输入0-9的数字'
                item.inputStatus = true
                return
              }
            }
          }
          // 判断车牌号是否重复
          if (item.id === 2) {
            if (item.text) {
              if (!isCarNumCorrect(item.text)) {
                item.errorText = '请输入正确的车牌号'
                item.inputStatus = true
                return
              }
            }
            // if (item.text !== item.originText) {
            //   const data = await this.isCarNumRepeat(item.text)
            //   if (data.code === 1) {
            //     item.errorText = data.msg
            //     item.inputStatus = true
            //     return
            //   } else if (data === false) {
            //     return
            //   }
            // }
          }
          item.inputStatus = false
          item.showInput = false
          item.isShowEditIcon = true
          console.log(item.text)
        }
      })
    },
    selectChangeEvent(id, data, msg) {
      if (msg === 'blur') {
        setTimeout(() => {
          data.forEach((item) => {
            if (id === item.id) {
              if (item.isRequire) {
                if (!item.text || item.text.trim() === '') {
                  item.errorText = `${item.title.replace(/\s*/g, '')}不能为空`
                  item.inputStatus = true
                } else {
                  item.inputStatus = false
                  item.showInput = false
                  item.isShowEditIcon = true
                }
              } else {
                item.inputStatus = false
                item.showInput = false
                item.isShowEditIcon = true
              }
            }
          })
        }, 300)
      } else {
        data.forEach((item) => {
          if (id === item.id) {
            if (item.isRequire) {
              if (!item.text || item.text.trim() === '') {
                item.errorText = `${item.title.replace(/\s*/g, '')}不能为空`
                item.inputStatus = true
              } else {
                item.inputStatus = false
                item.showInput = false
                item.isShowEditIcon = true
              }
            } else {
              item.inputStatus = false
              item.showInput = false
              item.isShowEditIcon = true
            }
          }
        })
      }
    },
    // async isCarNumRepeat(carNumber) {
    //   const { data } = await searchCarNum({ carNumber })
    //   if (data.code === 1) {
    //     return {
    //       code: data.code,
    //       msg: data.msg
    //     }
    //   } else if (data.code === 0) {
    //     return {
    //       code: data.code,
    //       msg: data.msg
    //     }
    //   } else {
    //     this.$message.error('服务器出错了')
    //     return false
    //   }
    // },
    // 审核意见输入框失去焦点
    // reviewCommentsInputBlur(id, data) {
    //   data.forEach((item) => {
    //     if (id === item.id) {
    //       if (item.text.trim()) {
    //         // 状态为false表示审核意见输入框有内容
    //         item.inputStatus = false
    //         return true
    //       } else {
    //         // 状态为true表示审核意见输入框没有内容
    //         item.inputStatus = true
    //         return false
    //       }
    //     }
    //   })
    // },
    async getDataSearchDetailById(id) {
      this.isLoading = true
      this.urlData = []
      this.overRunData.forEach((item) => {
        item.inputStatus = false
        item.showInput = false
      })
      this.baseInfo_body_data.forEach((item) => {
        item.inputStatus = false
        item.showInput = false
      })
      try {
        const { data } = await getDataSearchDetailById({ id })
        console.log(data)
        if (data.code === 0) {
          this.overRunData.forEach((item) => {
            item.isShowEditIcon = true
          })
          this.baseInfo_body_data.forEach((item) => {
            item.isShowEditIcon = true
          })
          const { entity, mediaUrl } = data.data
          this.overweightTypeText = this.getStepType(entity.overweightType)
          this.overweightText = this.getStepText(entity.overweightType)
          mediaUrl.forEach((item) => {
            if (item.type === 2) {
              if (item.typeCode === null) {
                this.findvideocover(item.pictureUrl, null)
                this.urlData.push({
                  bindKey: '6',
                  title: '车牌视频',
                  type: item.type,
                  pictureUrl: item.pictureUrl,
                  typeCode: null,
                  carNum: entity.carNum,
                  time: entity.createTime
                })
              } else if (item.typeCode === '5') {
                this.findvideocover(item.pictureUrl, '5')
                this.urlData.push({
                  bindKey2: '5',
                  title: '轮轴视频',
                  type: item.type,
                  pictureUrl: item.pictureUrl,
                  typeCode: '5',
                  carNum: entity.carNum,
                  time: entity.createTime
                })
              }
            }
          })

          mediaUrl.forEach((item) => {
            if (item.type === 1) {
              if (item.typeCode === '0') {
                this.urlData.push({
                  title: '车牌图片',
                  type: item.type,
                  pictureUrl: item.pictureUrl,
                  typeCode: '0',
                  carNum: entity.carNum,
                  time: entity.createTime
                })
              } else {
                this.urlData.push({
                  title: `过车图片${item.typeCode}`,
                  type: item.type,
                  pictureUrl: item.pictureUrl,
                  typeCode: item.typeCode,
                  carNum: entity.carNum,
                  time: entity.createTime
                })
              }
            }
          })

          this.previewImgList = []

          this.mediaUrl = mediaUrl
          this.urlData.forEach((item) => {
            if (item.type === 1) this.previewImgList.push(item.pictureUrl)
          })
          this.mediaData = this.urlData[0]

          if (entity.isAudit === 1) {
            this.isEdit = false
            this.overRunData.forEach((item) => {
              item.isShowEditIcon = false
            })
            this.baseInfo_body_data.forEach((item) => {
              item.isShowEditIcon = false
            })
          } else {
            this.isEdit = true
          }
          console.log(entity)
          console.log(this.mediaData)
          // id
          this.id = entity.id
          // 车辆ID
          this.carId = entity.carId
          // 总重
          this.overRunData[0].text = entity.totalWeight + ''
          // this.overRunData[0].text = kgToT(entity.totalWeight).handleNum + 't'
          // 标重
          this.overRunData[1].text = entity.stdWeight + ''
          // this.overRunData[1].text = kgToT(entity.stdWeight).handleNum + 't'
          // 超限重
          this.overRunData[2].text = entity.overWeight + ''
          // this.overRunData[2].text = kgToT(entity.overWeight).handleNum + 't'
          // 总轴数
          this.overRunData[3].text = entity.axleNum + ''

          // 超限率图表数据
          const rateNum = (entity.overWeight / entity.stdWeight) * 100
          // 判断是不是浮点数
          const regEXP = /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+)$/
          if (regEXP.test(rateNum)) {
            this.percentNum = rateNum.toFixed(2)
          } else {
            this.percentNum = rateNum
          }
          // 初始化图表
          // this.$bus.$emit('updateCsPercentCharts', this.percentNum)
          this.$store.commit('m_searchDetail/upDatePercentNum', this.percentNum)

          // 检测站点
          this.baseInfo_body_data[0].text = entity.siteName + ''
          // 车牌号
          this.baseInfo_body_data[1].text = entity.carNum
          this.baseInfo_body_data[1].originText = entity.carNum
          // 车牌颜色
          this.baseInfo_body_data[2].text = entity.color
          // 企业名称
          this.baseInfo_body_data[3].text = entity.companyName ? entity.companyName + '' : '—'
          // 检测时间
          this.baseInfo_body_data[4].text = entity.createTime + ''
          // // 检测数据来源
          // this.baseInfo_body_data[5].text = entity.carNum
          // // 检测单号
          this.baseInfo_body_data[5].text = entity.id + ''
          this.baseInfo_body_data[6].text = entity.opinion + ''
          this.isLoading = false
        } else {
          this.$message.error('获取详情信息失败')
        }
      } catch (err) {
        console.warn(err)
        this.$message.error('获取详情信息失败')
        // setTimeout(() => {
        //   this.isLoading = false
        // }, 5000)
      }
    },
    // 获取视频第一帧作为预览图
    findvideocover(url, type) {
      const video = document.createElement('video')
      video.setAttribute('autoplay', 'autoplay')
      // 再添加一个静音的属性，否则自动播放会有声音
      video.setAttribute('muted', 'muted')
      video.innerHTML = '<source src=' + url + ' type="audio/mp4">'

      const canvas = document.getElementById('videoCanvas') // 获取 canvas 对象
      const ctx = canvas.getContext('2d') // 绘制2d
      console.log(video.autoplay)
      video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
      video.currentTime = 1 // 第一帧

      video.addEventListener(
        'canplay',
        () => {
          // 创建画布的宽高属性节点，就是图片的大小，单位PX
          const anw = document.createAttribute('width')
          anw.nodeValue = 500
          const anh = document.createAttribute('height')
          anh.nodeValue = 300
          canvas.setAttributeNode(anw)
          canvas.setAttributeNode(anh)
          // 画布渲染
          ctx.drawImage(video, 0, 0, 500, 300)
          // 生成图片
          const base64 = canvas.toDataURL('image/png') // 这就是封面图片的base64编码
          // 视频结束播放的事件
          video.pause()

          // 把视频预览图赋值到预览框上
          if (type === null) {
            this.$nextTick(() => {
              this.videoPreviewImgBox_url = base64
            })
          } else if (type === '5') {
            this.$nextTick(() => {
              this.videoPreviewImgBox_wheelAxle_url = base64
            })
          }
        },
        false
      )
    },
    getStepType(type) {
      if (type === 0) {
        return 'success'
      } else if (type === 1) {
        return 'warning'
      } else if (type === 2) {
        return 'serious'
      } else {
        return 'danger'
      }
    },
    getStepText(type) {
      if (type === 0) {
        return '没有超重'
      } else if (type === 1) {
        return '轻度超重'
      } else if (type === 2) {
        return '较轻超重'
      } else {
        return '严重超重'
      }
    }
  }
}
</script>

<style scoped>
.cs-drawer {
  position: relative;
}

/* 预览盒子 */
.previewBox {
  display: inline-block;
  width: 303px;
  /* height: 202px; */
  height: 175px;
  /* margin: 16px 16px 8px 16px; */
  margin: 13px 13px 6px 13px;
}

.previewBox img {
  width: 100%;
  height: 100%;
}

.previewBox_noData {
  margin-bottom: 26px;
}

/* 预览项盒子 */
#previewItemBox {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 303px;
  height: 100%;
  margin: 0px 13px 16px 13px;
}

/* 预览项样式start */
.previewItem {
  width: 48px;
  /* height: 32px; */
  height: 28px;
  margin-right: 5px;
  margin-bottom: 5px;
  transition: all 0.5s ease;
  cursor: pointer;
}

.previewItem:last-child {
  margin-right: 0;
}

.previewDescribe_video {
  background-color: #006eff;
}

.previewDescribe_img {
  background-color: #67c23a;
}

.previewOption {
  position: relative;
  width: 100%;
  height: 100%;
}

.previewOption img {
  width: 100%;
  height: 100%;
}

.triangle_playIcon {
  position: absolute;
  top: 0;
  left: 3px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid #dcdfe6;
  border-bottom: 5px solid transparent;
  z-index: 10;
}

.previewDescribe {
  position: absolute;
  bottom: 0;
  right: 0;
  display: inline-block;
  width: 35px;
  height: 20px;
  text-align: center;
  color: #fff;
}

/* 当鼠标经过预览项时的样式，之后可以改为点击预览下修改类名 */
.previewItemActive {
  position: relative;
  top: -2px;
  /* width: 58px !important; */
  /* height: 36px; */
  height: 31px !important;
  border: 1px solid #4696ff;
}

.downLoadBtb {
  /* position: absolute; */
  /* top: 5px; */
  /* right: 0; */
  width: 45px !important;
  height: 22px !important;
  line-height: 22px;
  margin-top: 3px !important;
  margin-left: 0 !important;
}
/* 预览项样式end */

#overrunInfo {
  display: inline-block;
  /* width: 214px; */
  width: 265px;
  height: 60px;
  margin-right: 16px;
  margin-bottom: 8px;
  padding-left: 12px;
}

.cs-tip-label {
  margin-bottom: 10px;
}

.chartsBox {
  position: absolute;
  top: 232px;
  right: -2px;
  display: inline-block;
  width: 105px;
  height: 105px;
}

.chartsBox_noMediaData {
  top: 200px;
}

.chartsBox_moreData {
  top: 265px;
}

.overrunTitle {
  color: #939393;
  font-size: 12px;
}

.overrunText {
  position: relative;
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
  width: 50%;
}

.overrunText:nth-of-type(odd) {
  /* width: 118px; */
  width: 42%;
}

#divider {
  width: 300px;
  transform: scale(1);
  border: 1px solid #e5e5e5;
  margin-left: 18px;
  margin-right: 12px;
}

#baseInfo {
  width: 318px;
  padding-left: 18px;
  position: relative;
}

.baseInfo_header {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  margin-bottom: 10px;
}

.ReviewedImg {
  position: absolute;
  top: 0;
  right: 15px;
}

.cs-btn {
  width: 76px;
  height: 22px;
  /* padding: 0 12px; */
}

.baseInfo_body {
  width: 100%;
}

/* 覆盖掉overrunText类的样式 */
.baseInfoText {
  width: 100% !important;
  margin-top: 8px;
  display: flex;
}

/* 覆盖掉overrunText奇数类名的宽度限制 */
.baseInfoText:nth-of-type(odd) {
  width: 100%;
}

.infoText_span {
  padding-left: 7px;
}

/* 编辑图标样式 */
.el-icon-edit {
  cursor: pointer;
  color: #006eff;
}

/* 信息编辑框 */

.editInput {
  width: 55%;
  margin-left: 5px;
  z-index: 1;
}

.editInput >>> .el-input__inner {
  height: 19px;
}

.el-textarea >>> .el-textarea__inner {
  width: 239px;
  height: 36px;
}

.reviewComments {
  display: inline-block;
  width: 74px;
}

.reviewComments_normal {
  width: 48px;
}

.cs-btn {
  width: 153px;
  height: 34px;
  margin-top: 18px;
  margin-left: calc(50% - 76.5px);
}

.el-textarea >>> .el-textarea__inner {
  border-radius: 0;
}

.el-input >>> .el-input__inner {
  border-radius: 0;
}

.reviewCommentsBox {
  position: relative;
}

.requiredStart {
  position: absolute;
  top: 1px;
  left: -7px;
  color: #e02020;
  font-size: 14px;
}

.el_textarea_active >>> .el-textarea__inner {
  border-color: #f56c6c;
}

.el_input_active >>> .el-input__inner {
  border-color: #f56c6c;
}

.errorText {
  position: absolute;
  bottom: -15px;
  left: 58px;
  color: #f56c6c;
  font-size: 12px;
}

.inputErrorText {
  position: absolute;
  width: 110%;
  bottom: -15px;
  left: -5px;
  color: #f56c6c;
  font-size: 12px;
}

/* 弹出框样式 */
/* .el-popover >>> .popover >>> .el-popover--plain {
  padding: 0 !important;
}

.el-popover >>> .popover {
  padding: 5px;
} */

.tooltip {
  position: relative;
  /* display: inline-block; */
}

/* Tooltip 文本 */
.tooltiptext_overrunInfo {
  width: 120px;
  left: -105%;
  background-color: #fff;
  color: black;
  text-align: center;
  padding: 5px 0;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  margin-left: 10px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

  /* 定位 */
  position: absolute;
  z-index: 1;
}

.tooltiptext_baseInfo {
  width: 120px;
  left: -30%;
  background-color: #fff;
  color: black;
  text-align: center;
  padding: 5px 0;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  margin-left: 10px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

  /* 定位 */
  position: absolute;
  z-index: 1;
}

/* Tooltip 箭头 */
.tooltip .tooltiptext_overrunInfo::after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
}

.tooltip .tooltiptext_baseInfo::after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
}

.el-select >>> .el-input__inner {
  height: 19px;
  line-height: 19px;
  border-radius: 0;
}

.el-select >>> .el-input__icon {
  line-height: 19px;
}
</style>
